<template>
  <div id="allBox">
    <div id="box">
      <template v-if="showList.length == 0">
        <el-skeleton id="topBox" style="width: 100%" animated loading>
          <template slot="template">
            <div class="item" v-for="item in 4">
              <img :src="item.img" width="183px">
              <div class="showTitle">
                <el-skeleton-item class="showNumber"  variant="text" />
                <el-skeleton-item  variant="text" />
              </div>
              <div class="showTitle">
                <el-skeleton-item class="showNumber" variant="text" />
                <el-skeleton-item variant="text" />
              </div>
            </div>
          </template>
        </el-skeleton>

      </template>
      <div class="item" v-for="(item, index) in showList" :key="index">
        <img :src="item.img" width="183px">
        <div class="showTitle">
          <div class="showNumber">
            {{ item.oneNum }}
          </div>
          <p>{{ item.titleOne }}</p>
        </div>
        <div class="showTitle">
          <div class="showNumber">{{ item.twoNum }}</div>
          <p>{{ item.titleTwo }}</p>
        </div>
      </div>



    </div>
    <el-divider></el-divider>
    <el-card>
      <div>
        <div>
          <el-divider></el-divider>
          <span style="font-weight: bold;margin-left:30px;">代办业务</span>
          <el-divider></el-divider>

          <el-tabs ref="tabs"  v-model="activeName" @tab-click="handleClick">
            <el-tab-pane  label="能力发布待审核" name="first">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="serviceNameE" label="能力名称" >
                </el-table-column>
                <el-table-column prop="createBy" label="创建者" >
                </el-table-column>
                <el-table-column prop="serviceType" label="能力类型">
                </el-table-column>
                <el-table-column prop="updateTime" label="更新日期" >
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="能力订阅待审核" name="second">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="serviceName" label="服务名称">
                </el-table-column>
                <el-table-column prop="userAccount" label="用户账号" >
                </el-table-column>
                <el-table-column prop="createTime" label="更新日期" >
                  <template slot-scope="scope">
                    <span>{{ renderTime(scope.createTime) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

          </el-tabs>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </el-card>
    <el-divider></el-divider>
    <div>
      <el-card>
        <span style="font-weight: bold;margin-left:30px;">能力调用监控</span>
        <tj  style="width: 100%;"></tj>
      </el-card>


    </div>
  </div>



</template>

<script>
import tj from '../../components/Tongji/tj.vue'
import yhtj from '../../assets/wsximg/111.png'
import wdfb from '../../assets/wsximg/222.png'
import wddy from '../../assets/wsximg/333.png'
import {getinfor,listsub,listser} from "@/api/overview";

export default {

  components: {
    tj,
  },
  mounted() {
    getinfor().then(res => {
      this.showList[0].oneNum=res.data.userCount
      this.showList[0].twoNum=res.data.subCount
      this.showList[1].oneNum=res.data.serviceCount
      this.showList[1].twoNum=res.data.seruserCount
      this.showList[2].oneNum=res.data.ipbandCount
      this.showList[2].twoNum=res.data.userblockCount
    })
    this.list()
    this.$nextTick(() => {
      this.triggerTabClick();
      console.log(this.tableData)
    })
  },
  data() {
    return {
      useList:[],
      total:10,
      queryParams: {
        pageNum: 1,
        pageSize: 2,
      },
      activeName: 'first',
      nowlist: 1,
      tableData: [
      ],
      showList: [
        {
          img: yhtj,
          titleOne: '用户统计',
          titleTwo: '用户订阅',
          oneNum: 0,
          twoNum: 0
        },
        {
          img: wdfb,
          titleOne: '我的发布',
          titleTwo: '调用次数',
          oneNum: 0,
          twoNum: 0
        },
        {
          img: wddy,
          titleOne: 'IP黑名单',
          titleTwo: '用户封禁',
          oneNum: 0,
          twoNum: 0
        }
      ]
    }
  },
  methods: {
    triggerTabClick() {
      const tabs = this.$refs.tabs;
      if (tabs && tabs.$el) {
        console.log('Tabs element found:', tabs.$el);
        const firstTab = tabs.$el.querySelector('.el-tabs__item:first-child');
        if (firstTab) {
          console.log('First tab found:', firstTab);
          firstTab.click(); // 触发点击事件
        } else {
          console.error('First tab element not found.');
        }
      } else {
        console.error('Tabs element not found.');
      }
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    list(){
      listser(this.queryParams).then(res => {
        this.nowlist=0
        this.tableData = res.rows
        this.total = res.total
      })
    },
    getList(){
      if (this.nowlist == 0){
        listsub(this.queryParams).then(res => {
          this.nowlist=1
          this.tableData = res.rows
          this.total = res.total
        })
      }else if (this.nowlist == 1) {
        listser(this.queryParams).then(res => {
          this.nowlist=0
          this.tableData = res.rows
          this.total = res.total
        })
      }

    },
    handleClick(tab, event) {
      if (tab.name == 'first') {
        listser(this.queryParams).then(res => {
          this.nowlist = 1
          this.tableData = res.rows
          this.total = res.total
        })
      } else if (tab.name == 'second') {
        listsub(this.queryParams).then(res => {
          this.nowlist = 0
          this.tableData = res.rows
          this.total = res.total
        })
      }

    }
  }

};

</script>

<style lang="scss" scoped>
#allBox {
  padding: 30px;
}

.el-pagination {
  white-space: nowrap;
  padding: 10px 950px;
  background: #fff;
  border: 1px solid #e5e9f2;
  border-top: 0;
  text-align: right;
}

#box {
  width: 100%;
  height: 200px;
  background: #f0ecec;
  padding: 0px 25px;
  display: flex;
  justify-content: space-between;

}

.item {
  width: 32%;
  height: 200px;
  overflow: hidden;
  background: #ffffff;
  border: solid 10px #f0ecec;
  display: flex;

}

.showTitle {
  width: 30%;
  text-align: center;
  height: 200px;

  .showNumber {
    font-size: 45px;
    font-weight: bold;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }


}

/* #box>div:first-child {
  width: 33%;

  background: #ffffff;
  float: left;


}

#box>div:nth-child(2) {
  width: 33%;
  height: 200px;

  float: left;
  border: solid 10px #f0ecec;
  overflow: hidden;
}

#box>div:nth-child(3) {
  width: 33%;
  height: 200px;
  background: #ffffff;
  float: left;
  border: solid 10px #f0ecec;
  overflow: hidden;
} */
</style>
